<template>
  <div class="recommend">
    <div v-for="(l,i) in list" :key="i" class="scroll-col" :style="{width: span, flex: `0 0 ${span}`}" @click.stop="clickHandle(l)">
      <div id="img-recommend" class="image">
        <ImageVideo :host="host" :src="l.src" :is-image="l.type==='image'" fit="fill" />
      </div>
      <div class="masking">
        <div class="label">{{ l.label }}</div>
      </div>
    </div>
  </div>
</template>
<script>
import ImageVideo from '@/components/ImageVideo'
export default {
  name: 'RecommendNewProduct',
  components: {
    ImageVideo
  },
  props: {
    column: {
      type: Number,
      default: 3
    },
    list: {
      type: Array,
      default: () => []
    },
    host: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      left: 0
    }
  },
  computed: {
    span() {
      return `${100 / this.column}%`
    },
    indicatorNum() {
      return Math.ceil(this.list.length / this.column)
    },
    index() {
      const ele = this.$el.querySelector('#scroll-recommend')
      let i = 0
      if (ele) {
        const width = ele.getBoundingClientRect().width
        i = Math.ceil(this.left / width)
      }
      if (i >= this.indicatorNum)i = this.indicatorNum - 1
      return i
    }
  },
  activated() {
    const ele = this.$el.querySelector('#scroll-recommend')
    if (ele) {
      ele.scrollLeft = this.left
    }
  },
  methods: {
    clickHandle(item) {
      this.$emit('click', item)
    },
    scrollHandle(top, left, topSub, leftSub) {
      this.left = left
    }
  }
}
</script>
<style lang="less" scoped>
.recommend{
  position: relative;
  display: flex;
  flex-wrap: wrap;
  .scroll-col{
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    overflow: hidden;
    padding:5px;
    .image{
      height: 110px;
    }
    .masking{
      max-width: 100%;
      flex: 0 0 100%;
      .label{
        color: black;
        font-size: 14px;
        padding: 5px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: center;
      }
    }
  }
  .scroll-col+.scroll-col{
    // margin-left: 10px;
  }
}
</style>
<style lang="less">
#img-recommend{
  [class*="van-image__error"]{
      // height: auto !important;
      position: static;
      & img{
        object-fit: fill !important;
      }
    }
}
</style>
